<template>
  <el-container class="app_container flex">
    <Aside @handleNodeClick="handleNodeClick" />
    <div class="list_container flex both-100">
      <Breadcrumb title="消防描点" />
      <div class="content_container">
        <!-- 搜索模块 -->
        <el-form ref="searchMap" :inline="true" :model="searchMap" class="serach_wrapper flex-space-between">
          <div class="search">
            <el-form-item prop="fireControlPointType">
              <el-select v-model="searchMap.fireControlPointType" placeholder="请选择类型" clearable size="small">
                <el-option v-for="dict in dict.type.fire_control_point_type" :key="dict.value" :label="dict.label"
                  :value="dict.value" />
              </el-select>
            </el-form-item>
            <el-form-item prop="fireControlPointName">
              <el-input v-model="searchMap.fireControlPointName" placeholder="请选择" size="small"></el-input>
            </el-form-item>
            <el-form-item class="flex">
              <el-button @click="handleSearch()" class="btn_primary">查询</el-button>
              <el-button @click="handleReset()" class="btn_cancel">重置</el-button>
            </el-form-item>
          </div>
          <div class="edit">
            <el-form-item class="flex">
              <el-button @click="handleAdd()" class="btn_primary" icon="el-icon-plus"> 新增 </el-button>
            </el-form-item>
          </div>
        </el-form>
        <!-- 搜索模块over -->

        <!-- 表格模块 -->
        <div class="table_container">
          <el-table :data="dataList" v-loading="loading" class="per_table">
            <el-table-column type="index" prop="" label="序号"></el-table-column>
            <el-table-column label="所属公司" align="center" prop="projectPointName" :show-overflow-tooltip="true" />
            <el-table-column label="名称" align="center" prop="fireControlPointName" :show-overflow-tooltip="true" />
            <el-table-column label="类型" align="center" prop="" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                {{ dict.label.fire_control_point_type[scope.row.fireControlPointType] }}
              </template>
            </el-table-column>
            <el-table-column label="经纬度" width="300" align="center" prop="" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                {{ scope.row.lng + "/" + scope.row.lat }}
              </template>
            </el-table-column>
            <el-table-column label="创建人" align="center" prop="createBy" :show-overflow-tooltip="true"> </el-table-column>
            <el-table-column label="创建时间" align="center" prop="createTime" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column label="操作" width="150" fixed="right">
              <template slot-scope="scope">
                <div class="button-group">
                  <span type="text" class="tag_primary" size="small" @click="handleEdit(scope.row)">编辑</span>
                  <span type="text" class="tag_primary" size="small" @click="handleDelete(scope.row)">删除</span>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 表格模块over -->

        <!-- 分页 -->
        <Pagination v-show="total > 0" :total="total" :page.sync="searchMap.pageNum" :limit.sync="searchMap.pageSize"
          @change="getList"></Pagination>
        <!-- 分页over -->
      </div>
      <!-- <FireFightingDialog
          :dialogVisible="dialogVisible"
        /> -->
      <FireFightingDialog :dictMap="dict" :formData="formData" :title="title" :dialogVisible="dialogVisible"
        @cancel="cancel" @getList="getList">
      </FireFightingDialog>
      <!-- 弹窗 详情 over -->
    </div>
  </el-container>
</template>

<script>
import Aside from '@/components/Aside';
import { EventBus } from '@/utils/eventbus';
import FireFightingDialog from './FireFightingDialog.vue';
import { addiFreControlPoint, updateFireControlPoint, delFireControlPoint, getFireControlPoint, getFireControlPointList } from "@/api"
export default {
  components: { FireFightingDialog, Aside, },
  dicts: ['fire_control_point_type'],
  data() {
    return {
      // 遮罩层
      loading: false,
      // 搜索条件
      searchMap: {
        pageNum: 1,
        pageSize: 10,
        fireControlPointName: undefined,
        fireControlPointType: undefined,
        deptId: undefined
      },
      // 弹窗标题
      title: "",
      // 数据列表
      dataList: [],
      // 总条数
      total: 0,
      // 表单字段数据
      formData: {
        fireControlPointName: 0,
        fireControlPointId: '',
        projectPointTypeId: '',
        projectPointId: '',
        fireControlPointType: 0,
        lng: '',
        lat: '',
        lng: '',
        remark: ''
      },
      // 节点数据
      NodeData: undefined,
      descData: {},
      // 弹窗-新增，编辑头文字
      titleIndex: 0,
      // 弹窗-新增/编辑-显示隐藏
      dialogVisible: false,
      // 弹窗-详情-显示隐藏
      dialogVisibleDetail: false,
    };
  },
  computed: {},
  watch: {},
  methods: {
    // 风险点
    show() {
      console.log('风险点')
    },
    // 节点点击触发
    handleNodeClick(data) {
      console.log(data, '节点触发')
      this.NodeData.deptId = data.id
      this.NodeData.deptName = data.label
      this.searchMap.deptId = data.id;
      this.getList();
    },
    /** 搜索按钮操作 */
    handleSearch() {
      this.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    handleReset() {
      this.$nextTick(() => {
        this.$refs['searchMap'].resetFields();
        this.handleSearch();
      })
    },
    // 清空弹窗表单
    reset() {
      this.formData = {
        fireControlPointName: undefined,
        fireControlPointId: undefined,
        projectPointTypeId: undefined,
        projectPointId: undefined,
        fireControlPointType: 0,
        lng: undefined,
        lat: undefined,
        lng: undefined,
        remark: undefined,
        deptName: undefined,
        deptId: undefined,

      }
    },
    // 新增
    handleAdd() {
      this.reset();
      this.title = "新增"
      this.dialogVisible = true;
      this.formData.deptName = this.NodeData.deptName;
      this.formData.deptId = this.NodeData.deptId;
      console.log(this.NodeData,'add nodeData')
    },
    /** 修改按钮操作 */
    handleEdit(row) {
      this.reset();
      this.title = "修改"
      getFireControlPoint(row.fireControlPointId).then(res => {
        this.formData = res.data;
        this.formData.deptName = this.NodeData.deptName;
        this.dialogVisible = true;
        // this.title = "修改公告";
      });
    },
    // 删除数据
    handleDelete(row) {
      const ids = row.fireControlPointId || this.ids;
      if (this.$utils.isNotEmpty(ids)) {
        this.$confirm('是否确认删除该条的数据项？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          delFireControlPoint([ids]).then(res => {
            if (res.code == 200) {
              this.$message.success('删除成功');
              this.getList();
            }
          });
        });
      } else {
        this.$message.warning('请选择数据进行删除');
      }
    },
    getList() {
      this.loading = true;
      if (this.searchMap.deptId == undefined) {
        this.searchMap.deptId = this.treeData.id;
        this.NodeData = {
          "deptId": this.treeData.id,
          "deptName": this.treeData.projectPointName,
        }
      }
      getFireControlPointList(this.searchMap).then(res => {
        console.log(res, 'dataList')
        this.dataList = res.rows;
        this.total = res.total;
        this.loading = false;
      });
    },
    // 弹窗新增编辑-取消
    cancel() {
      this.dialogVisible = false;
    },

  },
  created() {
    EventBus.$on('currentTree', treeData => {
      console.log('Received tree data:', treeData);
      this.treeData = treeData
      // 处理接收到的数据
    });
    setTimeout(() => {
    this.getList();
    }, 500);
  },
  mounted() {

  },
}
</script>

<style lang='less' scoped></style>